•

NaN / NaN
Voltar
BR
Pesquisar com sua voz
Notificações
BR

Início
Shorts
Inscrições
YouTube Music
Você
Histórico
Playlists
Seus vídeos
Seus cursos
Assistir mais tarde
Vídeos com "Gostei"
Downloads

Inscrições

BabyBus Português - Músicas Infantis e Desenhos
whinderssonnunes
BBC News Brasil
Tempero Drag
Ciência Todo Dia
Canal Nostalgia
Porta dos Fundos
Mostrar mais
Mostrar menos

Explorar

Em alta
Shopping
Música
Filmes
Ao vivo
Jogos
Notícias
Esportes
Cursos
Podcasts

Mais do YouTube

YouTube Studio
YouTube Music
YouTube Kids

Configurações
Histórico de denúncias
Ajuda
Enviar feedback
SobreImprensaDireitos autoraisEntre em contatoCriadores de conteúdoPublicidadeDesenvolvedores
TermosPrivacidadePolítica e segurançaComo funciona o YouTubeTestar os novos recursos
© 2025 Google LLC
Início
Início
Shorts
Shorts
Inscrições
Inscrições
YouTube Music
YouTube Music
Você
Você
Downloads
Downloads
Anterior
Tudo
Podcasts
Música
Programação de computadores
Gravações
Pensamentos
Mixes
Snoopy
Lista de reprodução
Neurociência
História
Tênis
Ao vivo
Filmes de comédia
Palestras
Enviados recentemente
Assistidos
Novidades para você
Próximo
18:31
18:31
Tocando agora
18:31
18:31
18:31
Tocando agora

se ele vender um curso, eu compro

Maicon Küster
Maicon Küster

Verificado
•
•
378 mil visualizações há 9 dias
8:25
8:25
Tocando agora
8:25
8:25
8:25
Tocando agora

Como satisfação com pequenas coisas pode trazer bem-estar profundo, segundo cientistas

BBC News Brasil
BBC News Brasil

Verificado
•
•
222 mil visualizações há 9 meses
24:22
24:22
Tocando agora
24:22
24:22
24:22
Tocando agora

The Only CSS Layout Guide You'll Ever Need

EdRoh
EdRoh
•
•
293 mil visualizações há 1 ano
5:17:16
5:17:16
Tocando agora
5:17:16
5:17:16
5:17:16
Tocando agora
AO VIVO

[𝐫𝐞𝐥𝐚𝐱𝐢𝐧𝐠 𝗽𝗹𝗮𝘆𝗹𝗶𝘀𝘁] Snoopy’s Happy Jazz Songs 🎧🥪 Good Mood Music and Dance with Snoopy

𝗰𝗮𝗿𝘁𝗼𝗼𝗻 𝗽𝗶𝗮𝗻𝗼 📼
𝗰𝗮𝗿𝘁𝗼𝗼𝗻 𝗽𝗶𝗮𝗻𝗼 📼
•
•
304 mil visualizações há 3 meses
27:22
27:22
Tocando agora
27:22
27:22
27:22
Tocando agora

As Mulheres Não Querem Que Você Encontre Este Vídeo! - Reflexões Profundas de Sócrates

Kuantum Sıçrama
Kuantum Sıçrama
•
•
66 visualizações há 22 horas
12:09
12:09
Tocando agora
12:09
12:09
12:09
Tocando agora

How To Make Friends

Kurzgesagt – In a Nutshell
Kurzgesagt – In a Nutshell

Verificado
•
•
7,2 mi de visualizações há 2 anos
17:19
17:19
Tocando agora
17:19
17:19
17:19
Tocando agora

Como seu cérebro escolhe o que lembrar

Artem Kirsanov
Artem Kirsanov

Verificado
•
•
639 mil visualizações há 5 meses
3:21:32
3:21:32
Tocando agora
3:21:32
3:21:32
3:21:32
Tocando agora

Let go of what you can't control. | Lo-fi Rain | Study Beats | Cafe Music

chill chill journal
chill chill journal

Canal oficial do artista
•
•
149 mil visualizações há 4 semanas
6:03
6:03
Tocando agora
6:03
6:03
6:03
Tocando agora

The dark history of bananas - John Soluri

TED-Ed
TED-Ed

Verificado
•
•
3 mi de visualizações há 4 anos

Shorts

Christmas with American vs European girls

6,6 mi de visualizações

QUANDO EU DECIDO SAIR SEM ME ARRUMAR:

2,4 mi de visualizações

A segurança na Coreia do Sul é absurda #podcast #qconfusao #viagem #coreiadosul #cultura

2,7 mi de visualizações

Wait, we had a DEI program? 🤨

1,6 mi de visualizações

As PESSOAS de COR de ANGOLA...

2,2 mi de visualizações

AI denied my medical claim 🤠🤪

3,1 mi de visualizações

she is not paying tuition herself it's fine

8,6 mi de visualizações

ENTREGANDO ALGO QUE VENDI PELA INTERNET | @maipurper

4,1 mi de visualizações

Pedindo para uma garota em forma me mostrar quantas flexões ela consegue fazer. #nyc #pullup #gir...

3,5 mi de visualizações
3:06:18
3:06:18
Tocando agora
3:06:18
3:06:18
3:06:18
Tocando agora

Black Cats Groove Tonight: Jazz de Baixo Profundo para Foco Estiloso

Noir Jazz Cats
Noir Jazz Cats
•
•
117 mil visualizações há 4 semanas
8:45
8:45
Tocando agora
8:45
8:45
8:45
Tocando agora

Eu Sou um IGNORANTE

Felipe Machado
Felipe Machado
•
•
228 visualizações há 2 dias
9:28
9:28
Tocando agora
9:28
9:28
9:28
Tocando agora

Do 10% of developers do *nothing*?

Alberta Tech
Alberta Tech

Verificado
•
•
284 mil visualizações há 6 meses

Shorts

Why MetaAI won’t leave you alone 🥴😵‍💫

1,4 mi de visualizações

o conselho tutelar precisa ver oq a malu haridade faz na internet

3 mi de visualizações

If the world was made for ADHD Part 2 #adhd #adhdawareness

679 mil visualizações

Finishing the Stardew Valley mines for the first time 💀

462 mil visualizações

A codificação de vibração está ficando fora de controle 😅

739 mil visualizações

File types hanging out

3,9 mi de visualizações

criança coach explica as vantagens de tomar banho gelado

627 mil visualizações

#programmer #softwaredeveloper #coding #vibecoding #tech #programmerhumor #developermemes #devmemes

1,9 mi de visualizações

Alemã virou Cria

249 mil visualizações
18:19
18:19
Tocando agora
18:19
18:19
18:19
Tocando agora

Por que o BRASIL não tem TRENS?

Ciência Todo Dia
Ciência Todo Dia

Verificado
•
•
885 mil visualizações há 1 mês
24:02
24:02
Tocando agora
24:02
24:02
24:02
Tocando agora
AO VIVO

Por Dentro da OpenAI com a Criadora do ChatGPT | The Circuit

Bloomberg Originals
Bloomberg Originals

Verificado
•
•
3 mi de visualizações há 1 ano

Dublado

26:43
26:43
Tocando agora
26:43
26:43
26:43
Tocando agora

At the Airport English Conversation | Travel English | Listening & Speaking Practice | Podcast

English in Comfort
English in Comfort

Verificado
•
•
471 visualizações há 5 horas
16:18
16:18
Tocando agora
16:18
16:18
16:18
Tocando agora

Who is polluting the ocean with plastic?

The Economist
The Economist

Verificado
•
•
213 mil visualizações há 1 ano
14:27
14:27
Tocando agora
14:27
14:27
14:27
Tocando agora

The Biggest Myth In Education

Veritasium
Veritasium

Verificado
•
•
14 mi de visualizações há 3 anos
10:56
10:56
Tocando agora
10:56
10:56
10:56
Tocando agora

The Easiest Way to Build Websites

Sajid
Sajid
•
•
942 mil visualizações há 1 ano
51:56
51:56
Tocando agora
51:56
51:56
51:56
Tocando agora

Burnout - When does work start feeling pointless? | DW Documentary

DW Documentary
DW Documentary

Verificado
•
•
1,8 mi de visualizações há 1 ano
10:34
10:34
Tocando agora
10:34
10:34
10:34
Tocando agora

Tennis Fundamentals You NEED to Master

Patrick Mouratoglou
Patrick Mouratoglou
•
•
65 mil visualizações há 7 dias
38:24
38:24
Tocando agora
38:24
38:24
38:24
Tocando agora

Otimização, aprendizado de máquina e a matemática por trás do ChatGPT

Ciência e brisa
Ciência e brisa
•
•
166 visualizações há 2 dias
React Crash Course
2x
Se a reprodução não começar em instantes, reinicie seu dispositivo.
5 segundos
Puxe para cima para uma busca precisa
Próximo (SHIFT+n)
Compartilhar
2:56:44
•
1:04:15 / 3:04:35
•Assista o vídeo completo
Você não fez login
Os vídeos que você assistir poderão ser adicionados ao histórico de visualização da TV e influenciarão as recomendações dela. Para evitar isso, cancele e faça login no YouTube em um computador.
job listings we can simplyimport job listing the
Próximo
Ao vivo
Em breve
Assista agora
Próximo (SHIFT+n)
Expandir (i)
2:56:44
Compartilhar
Ocorreu um erro ao recuperar informações de compartilhamento. Tente novamente mais tarde.
Volume estável
Iluminação cinematográfica
Anotações
Legendas/CC (1)
Inglês (gerada automaticamente)
Timer de suspensão
Desat
Velocidade da reprodução
0.75
Qualidade
Automático (720p)
Intro
What Is React? (Slide)
Why React? (Slide)
What Are Components? (Slide)
What Is State? (Slide)
What Are Hooks? (Slide)
What Is JSX? (Slide)
SPA, SSR, SSG (Slide)
Vite (Slide)
Project Demo
Setup React With Vite
File Explanation
Boilerplate Cleanup
Tailwind CSS Setup
JSX Crash Course
Start Homepage
Navbar Component
Image Import
Hero Component
Props
Default Props
Wrapper Components
JobListings Component
Create Lists With map()
Single JobListing Component
Limit Jobs to 3
useState() Hook & Desc Toggle
Creating an Event
Updating Component State
React Icons Package
React Router Setup
Create Routes From Elements
Router Provider
Homepage Component/Route
Layouts
Jobs Page Component/Route
Link Component
Custom 404 Page
Active Links With NavLink
Conditional Rendering
JSON Server Setup
useEffect() & Data Fetching
Loading Spinner
Proxying
Single Job Page
useParams() to Get ID
Data Loaders
Single Job Output
Add Job Page
Working With Forms
Form Submission
Pass Function as Prop
POST Request to Add Job
Delete Job Button/function
DELETE Request to Remove Job
React Toastify Package
Edit Job Page/Form
Update Form Submission
PUT Request to Update Job
Build Static Assets For Production
1:04:14
1:04:15 / 3:04:35
•Assista o vídeo completo

React Crash Course

Traversy Media
Traversy Media

Verificado
2,35 mi de inscritos
Download
842.813 visualizações 18 de mar. de 2024
Mostrar menos
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Code: https://github.com/bradtraversy/react... React Front To Back Full Course: https://www.traversymedia.com/Modern-... Check out all my courses: https://traversymedia.com Social Media: Github - https://github.com/bradtraversy Twitter -   / traversymedia   Instagram -   / traversymedia   Facebook -   / traversymedia   Linkedin -   / bradtraversy   Timestamps: 0:00 - Intro 1:55 - What Is React? (Slide) 3:43 - Why React? (Slide) 7:19 - What Are Components? (Slide) 8:21 - What Is State? (Slide) 10:00 - What Are Hooks? (Slide) 11:17 - What Is JSX? (Slide) 12:42 - SPA, SSR, SSG (Slide) 15:38 - Vite (Slide) 16:30 - Project Demo 19:53 - Setup React With Vite 22:29 - File Explanation 25:11 - Boilerplate Cleanup 26:48 - Tailwind CSS Setup 30:24 - JSX Crash Course 39:37 - Start Homepage 42:00 - Navbar Component 43:56 - Image Import 45:24 - Hero Component 46:17 - Props 48:00 - Default Props 48:51 - Wrapper Components 55:14 - JobListings Component 58:50 - Create Lists With map() 1:03:20 - Single JobListing Component 1:05:49 - Limit Jobs to 3 1:07:50 - useState() Hook & Desc Toggle 1:13:07 - Creating an Event 1:14:20 - Updating Component State 1:16:00 - React Icons Package 1:18:00 - React Router Setup 1:20:21 - Create Routes From Elements 1:21:36 - Router Provider 1:22:36 - Homepage Component/Route 1:24:40 - Layouts 1:29:06 - Jobs Page Component/Route 1:30:50 - Link Component 1:34:20 - Custom 404 Page 1:36:55 - Active Links With NavLink 1:41:00 - Conditional Rendering 1:43:10 - JSON Server Setup 1:47:00 - useEffect() & Data Fetching 1:53:07 - Loading Spinner 1:51:06 - Conditional Fetching 1:59:45 - Proxying 2:03:38 - Single Job Page 2:09:04 - useParams() to Get ID 2:12:25 - Data Loaders 2:16:36 - Single Job Output 2:22:00 - Add Job Page 2:23:40 - Working With Forms 2:30:05 - Form Submission 2:35:27 - Pass Function as Prop 2:39:32 - POST Request to Add Job 2:41:45 - Delete Job Button/function 2:45:12 - DELETE Request to Remove Job 2:46:50 - React Toastify Package 2:50:08 - Edit Job Page/Form 2:56:05 - Update Form Submission 2:58:54 - PUT Request to Update Job 3:02:10 - Build Static Assets For Production
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Code: …...mais
...mais

Capítulos

Intro

Intro

0:00

Intro

0:00

What Is React? (Slide)

What Is React? (Slide)

1:55

What Is React? (Slide)

1:55

Why React? (Slide)

Why React? (Slide)

3:43

Why React? (Slide)

3:43

What Are Components? (Slide)

What Are Components? (Slide)

7:19

What Are Components? (Slide)

7:19

What Is State? (Slide)

What Is State? (Slide)

8:21

What Is State? (Slide)

8:21

What Are Hooks? (Slide)

What Are Hooks? (Slide)

10:00

What Are Hooks? (Slide)

10:00

What Is JSX? (Slide)

What Is JSX? (Slide)

11:17

What Is JSX? (Slide)

11:17

SPA, SSR, SSG (Slide)

SPA, SSR, SSG (Slide)

12:42

SPA, SSR, SSG (Slide)

12:42
Transcrição

Acompanhe usando a transcrição.

Traversy Media

2,35 mi de inscritos
Vídeos
Sobre
Vídeos
Sobre
Twitter
Instagram
Linkedin
Mostrar menos

React Crash Course

842.813 visualizações842 mil visualizações
18 de mar. de 2024
Download

991 comentários

Classificar comentários
Ordenar por
Principais comentários
Mais recentes primeiro
Paloma Queiroz
Adicione um comentário…

@husseinkizz

há 1 ano
Thanks Brad, always one of the best teachers on internet, you taught me react 4 years ago, I now make react libraries and stuff, thanks man, can't appreciate your works enough!
Mostrar menos Ler mais
Gostei
185
Não gostei

@azhanakhtar6326

há 23 horas
This man knows how to teach, Thanks bud
Mostrar menos Ler mais
Gostei
1
Não gostei

@fromagetriste

há 1 ano
super happy about the video, thank you so much <3
Mostrar menos Ler mais
Gostei
5
Não gostei

@awesomestuff8819

há 3 semanas
I have learned javascript from you as well from the crash course and now this. The fact that you posted this high quality content for anyone to learn React with good practice for FREE! is a big deal and I'll be heading over to your website to dive into paid courses because of this kind gesture. Thank you sir! Keep up the great work!
Mostrar menos Ler mais
Gostei
Não gostei

@BMRG14

há 1 ano
Right on time! Thank you very much.
Mostrar menos Ler mais
Gostei
7
Não gostei
❤ por @TraversyMedia

@xchoochoopainx

há 2 meses
I have a job interview tomorrow and this really helped me! I don't think I'm gonna get the job, but this is a great refresher. thanks for this!
Mostrar menos Ler mais
Gostei
Não gostei

@christopherlopez2491

há 1 ano
I started watching you and your html intro video in 2019. Im still here… still learning and still building thank you so much for these videos
Mostrar menos Ler mais
Gostei
5
Não gostei

@ahonui

há 2 semanas (editado)
Brad is the absolute best teacher for coding on Youtube.
Mostrar menos Ler mais
Gostei
Não gostei

@社會觀察家

há 1 ano
THX Brad, learned everything from you, it gives me a very peaceful vibe just listening to your voice, so I still watch/listen your every video.
Mostrar menos Ler mais
Gostei
4
Não gostei

@ultronsam1214

há 3 meses
For those that might confused about where the isActive props passed to NavLink's linkClass comes from? isActive is built-in to NavLink, so it returns true.
Mostrar menos Ler mais
Gostei
1
Não gostei

@84paulflan

há 2 meses (editado)
For those experiencing the aside not functioning correctly: Replace: <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6"> with <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-6"> <main> with <main className="md:col-span-2"> and <aside> with <aside className="md:col-span-1">
Mostrar menos Ler mais
Gostei
3
Não gostei

@princeboypopi

há 2 meses
Thank you Brad, I kinda find myself to this youtube channel whenever I need something and have no where else to get it from and on addition I really find it hard to believe that all this is free.
Mostrar menos Ler mais
Gostei
Não gostei

@reginold5988

há 1 ano
Next MERN 2024 course pls with typescript this time ❤❤❤❤
Mostrar menos Ler mais
Gostei
6
Não gostei

@naveencooray2733

há 6 meses
Here we are, back where it all started. after 3 years of Angular just wanted to refresh my knowledge on React. Thanks Brad!
Mostrar menos Ler mais
Gostei
Não gostei

@Ndunda_Kelvin

há 10 meses
I don't know if it's me who is getting better in react, or you just have good teaching skills that make everything simple and easy to understand. Thank you for this.
Mostrar menos Ler mais
Gostei
1
Não gostei

@Salvator94

há 4 meses
Thank you so much! Your explanation made everything crystal clear and incredibly easy to understand. I genuinely appreciate the effort you put into breaking it down—it’s such a game-changer!
Mostrar menos Ler mais
Gostei
Não gostei

@WebDevYTLearningAccount

há 8 meses
Thank you for another great lesson. I had to switch teams in my job and quickly learn React, this really helped understand more about the fundamentals with actual application.
Mostrar menos Ler mais
Gostei
Não gostei

@jderifaj

há 5 meses
This is a great little video. I've dipped my toe in React over the years, this is a nice highlight of the basics.
Mostrar menos Ler mais
Gostei
Não gostei

@ashutosh_tiwari

há 1 ano
One of the Best Crash Course on React in 2024!! Thankyou very much Brad❤.
Mostrar menos Ler mais
Gostei
1
Não gostei

@MONGERATSEA

há 6 meses
This is the best react-refresher on youtube. Covers all important basic topics. Thank you for the video
Mostrar menos Ler mais
Gostei
Não gostei

Comentários 991

Principais comentários
Mais recentes primeiro

Neste vídeo

Intro

Intro

0:00

Intro

0:00

What Is React? (Slide)

What Is React? (Slide)

1:55

What Is React? (Slide)

1:55

Why React? (Slide)

Why React? (Slide)

3:43

Why React? (Slide)

3:43

What Are Components? (Slide)

What Are Components? (Slide)

7:19

What Are Components? (Slide)

7:19

What Is State? (Slide)

What Is State? (Slide)

8:21

What Is State? (Slide)

8:21

What Are Hooks? (Slide)

What Are Hooks? (Slide)

10:00

What Are Hooks? (Slide)

10:00

What Is JSX? (Slide)

What Is JSX? (Slide)

11:17

What Is JSX? (Slide)

11:17

SPA, SSR, SSG (Slide)

SPA, SSR, SSG (Slide)

12:42

SPA, SSR, SSG (Slide)

12:42

Vite (Slide)

Vite (Slide)

15:38

Vite (Slide)

15:38

Project Demo

Project Demo

16:30

Project Demo

16:30

Setup React With Vite

Setup React With Vite

19:53

Setup React With Vite

19:53

File Explanation

File Explanation

22:29

File Explanation

22:29

Boilerplate Cleanup

Boilerplate Cleanup

25:11

Boilerplate Cleanup

25:11

Tailwind CSS Setup

Tailwind CSS Setup

26:48

Tailwind CSS Setup

26:48

JSX Crash Course

JSX Crash Course

30:24

JSX Crash Course

30:24

Start Homepage

Start Homepage

39:37

Start Homepage

39:37

Navbar Component

Navbar Component

42:00

Navbar Component

42:00

Image Import

Image Import

43:56

Image Import

43:56

Hero Component

Hero Component

45:24

Hero Component

45:24

Props

Props

46:17

Props

46:17

Default Props

Default Props

48:00

Default Props

48:00

Wrapper Components

Wrapper Components

48:51

Wrapper Components

48:51

JobListings Component

JobListings Component

55:14

JobListings Component

55:14

Create Lists With map()

Create Lists With map()

58:50

Create Lists With map()

58:50

Single JobListing Component

Single JobListing Component

1:03:20

Single JobListing Component

1:03:20

Limit Jobs to 3

Limit Jobs to 3

1:05:49

Limit Jobs to 3

1:05:49

useState() Hook & Desc Toggle

useState() Hook & Desc Toggle

1:07:50

useState() Hook & Desc Toggle

1:07:50

Creating an Event

Creating an Event

1:13:07

Creating an Event

1:13:07

Updating Component State

Updating Component State

1:14:20

Updating Component State

1:14:20

React Icons Package

React Icons Package

1:16:00

React Icons Package

1:16:00

React Router Setup

React Router Setup

1:18:00

React Router Setup

1:18:00

Create Routes From Elements

Create Routes From Elements

1:20:21

Create Routes From Elements

1:20:21

Router Provider

Router Provider

1:21:36

Router Provider

1:21:36

Homepage Component/Route

Homepage Component/Route

1:22:36

Homepage Component/Route

1:22:36

Layouts

Layouts

1:24:40

Layouts

1:24:40

Jobs Page Component/Route

Jobs Page Component/Route

1:29:06

Jobs Page Component/Route

1:29:06

Link Component

Link Component

1:30:50

Link Component

1:30:50

Custom 404 Page

Custom 404 Page

1:34:20

Custom 404 Page

1:34:20

Active Links With NavLink

Active Links With NavLink

1:36:55

Active Links With NavLink

1:36:55

Conditional Rendering

Conditional Rendering

1:41:00

Conditional Rendering

1:41:00

JSON Server Setup

JSON Server Setup

1:43:10

JSON Server Setup

1:43:10

useEffect() & Data Fetching

useEffect() & Data Fetching

1:47:00

useEffect() & Data Fetching

1:47:00

Loading Spinner

Loading Spinner

1:53:07

Loading Spinner

1:53:07

Proxying

Proxying

1:59:45

Proxying

1:59:45

Single Job Page

Single Job Page

2:03:38

Single Job Page

2:03:38

useParams() to Get ID

useParams() to Get ID

2:09:04

useParams() to Get ID

2:09:04

Data Loaders

Data Loaders

2:12:25

Data Loaders

2:12:25

Single Job Output

Single Job Output

2:16:36

Single Job Output

2:16:36

Add Job Page

Add Job Page

2:22:00

Add Job Page

2:22:00

Working With Forms

Working With Forms

2:23:40

Working With Forms

2:23:40

Form Submission

Form Submission

2:30:05

Form Submission

2:30:05

Pass Function as Prop

Pass Function as Prop

2:35:27

Pass Function as Prop

2:35:27

POST Request to Add Job

POST Request to Add Job

2:39:32

POST Request to Add Job

2:39:32

Delete Job Button/function

Delete Job Button/function

2:41:45

Delete Job Button/function

2:41:45

DELETE Request to Remove Job

DELETE Request to Remove Job

2:45:12

DELETE Request to Remove Job

2:45:12

React Toastify Package

React Toastify Package

2:46:50

React Toastify Package

2:46:50

Edit Job Page/Form

Edit Job Page/Form

2:50:08

Edit Job Page/Form

2:50:08

Update Form Submission

Update Form Submission

2:56:05

Update Form Submission

2:56:05

PUT Request to Update Job

PUT Request to Update Job

2:58:54

PUT Request to Update Job

2:58:54

Build Static Assets For Production

Build Static Assets For Production

3:02:10

Build Static Assets For Production

3:02:10
Sincronizar com o momento do vídeo

Capítulos

Intro

Intro

0:00

Intro

0:00

What Is React? (Slide)

What Is React? (Slide)

1:55

What Is React? (Slide)

1:55

Why React? (Slide)

Why React? (Slide)

3:43

Why React? (Slide)

3:43

What Are Components? (Slide)

What Are Components? (Slide)

7:19

What Are Components? (Slide)

7:19

What Is State? (Slide)

What Is State? (Slide)

8:21

What Is State? (Slide)

8:21

What Are Hooks? (Slide)

What Are Hooks? (Slide)

10:00

What Are Hooks? (Slide)

10:00

What Is JSX? (Slide)

What Is JSX? (Slide)

11:17

What Is JSX? (Slide)

11:17

SPA, SSR, SSG (Slide)

SPA, SSR, SSG (Slide)

12:42

SPA, SSR, SSG (Slide)

12:42

Vite (Slide)

Vite (Slide)

15:38

Vite (Slide)

15:38

Project Demo

Project Demo

16:30

Project Demo

16:30

Setup React With Vite

Setup React With Vite

19:53

Setup React With Vite

19:53

File Explanation

File Explanation

22:29

File Explanation

22:29

Boilerplate Cleanup

Boilerplate Cleanup

25:11

Boilerplate Cleanup

25:11

Tailwind CSS Setup

Tailwind CSS Setup

26:48

Tailwind CSS Setup

26:48

JSX Crash Course

JSX Crash Course

30:24

JSX Crash Course

30:24

Start Homepage

Start Homepage

39:37

Start Homepage

39:37

Navbar Component

Navbar Component

42:00

Navbar Component

42:00

Image Import

Image Import

43:56

Image Import

43:56

Hero Component

Hero Component

45:24

Hero Component

45:24

Props

Props

46:17

Props

46:17

Default Props

Default Props

48:00

Default Props

48:00

Wrapper Components

Wrapper Components

48:51

Wrapper Components

48:51

JobListings Component

JobListings Component

55:14

JobListings Component

55:14

Create Lists With map()

Create Lists With map()

58:50

Create Lists With map()

58:50

Single JobListing Component

Single JobListing Component

1:03:20

Single JobListing Component

1:03:20

Limit Jobs to 3

Limit Jobs to 3

1:05:49

Limit Jobs to 3

1:05:49

useState() Hook & Desc Toggle

useState() Hook & Desc Toggle

1:07:50

useState() Hook & Desc Toggle

1:07:50

Creating an Event

Creating an Event

1:13:07

Creating an Event

1:13:07

Updating Component State

Updating Component State

1:14:20

Updating Component State

1:14:20

React Icons Package

React Icons Package

1:16:00

React Icons Package

1:16:00

React Router Setup

React Router Setup

1:18:00

React Router Setup

1:18:00

Create Routes From Elements

Create Routes From Elements

1:20:21

Create Routes From Elements

1:20:21

Router Provider

Router Provider

1:21:36

Router Provider

1:21:36

Homepage Component/Route

Homepage Component/Route

1:22:36

Homepage Component/Route

1:22:36

Layouts

Layouts

1:24:40

Layouts

1:24:40

Jobs Page Component/Route

Jobs Page Component/Route

1:29:06

Jobs Page Component/Route

1:29:06

Link Component

Link Component

1:30:50

Link Component

1:30:50

Custom 404 Page

Custom 404 Page

1:34:20

Custom 404 Page

1:34:20

Active Links With NavLink

Active Links With NavLink

1:36:55

Active Links With NavLink

1:36:55

Conditional Rendering

Conditional Rendering

1:41:00

Conditional Rendering

1:41:00

JSON Server Setup

JSON Server Setup

1:43:10

JSON Server Setup

1:43:10

useEffect() & Data Fetching

useEffect() & Data Fetching

1:47:00

useEffect() & Data Fetching

1:47:00

Loading Spinner

Loading Spinner

1:53:07

Loading Spinner

1:53:07

Proxying

Proxying

1:59:45

Proxying

1:59:45

Single Job Page

Single Job Page

2:03:38

Single Job Page

2:03:38

useParams() to Get ID

useParams() to Get ID

2:09:04

useParams() to Get ID

2:09:04

Data Loaders

Data Loaders

2:12:25

Data Loaders

2:12:25

Single Job Output

Single Job Output

2:16:36

Single Job Output

2:16:36

Add Job Page

Add Job Page

2:22:00

Add Job Page

2:22:00

Working With Forms

Working With Forms

2:23:40

Working With Forms

2:23:40

Form Submission

Form Submission

2:30:05

Form Submission

2:30:05

Pass Function as Prop

Pass Function as Prop

2:35:27

Pass Function as Prop

2:35:27

POST Request to Add Job

POST Request to Add Job

2:39:32

POST Request to Add Job

2:39:32

Delete Job Button/function

Delete Job Button/function

2:41:45

Delete Job Button/function

2:41:45

DELETE Request to Remove Job

DELETE Request to Remove Job

2:45:12

DELETE Request to Remove Job

2:45:12

React Toastify Package

React Toastify Package

2:46:50

React Toastify Package

2:46:50

Edit Job Page/Form

Edit Job Page/Form

2:50:08

Edit Job Page/Form

2:50:08

Update Form Submission

Update Form Submission

2:56:05

Update Form Submission

2:56:05

PUT Request to Update Job

PUT Request to Update Job

2:58:54

PUT Request to Update Job

2:58:54

Build Static Assets For Production

Build Static Assets For Production

3:02:10

Build Static Assets For Production

3:02:10
Sincronizar com o momento do vídeo

Criar clipe

Paloma Queiroz
Público
 
 
0/140
–
30.0 segundos
Continue criando clipes quando o anúncio acabar
Não é possível criar um clipe enquanto um anúncio está sendo reproduzido

Descrição

React Crash Course
17 milMarcações "Gostei"
842.813Visualizações
202418 de mar.
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Code: https://github.com/bradtraversy/react... React Front To Back Full Course: https://www.traversymedia.com/Modern-... Check out all my courses: https://traversymedia.com Social Media: Github - https://github.com/bradtraversy Twitter -   / traversymedia   Instagram -   / traversymedia   Facebook -   / traversymedia   Linkedin -   / bradtraversy   Timestamps: 0:00 - Intro 1:55 - What Is React? (Slide) 3:43 - Why React? (Slide) 7:19 - What Are Components? (Slide) 8:21 - What Is State? (Slide) 10:00 - What Are Hooks? (Slide) 11:17 - What Is JSX? (Slide) 12:42 - SPA, SSR, SSG (Slide) 15:38 - Vite (Slide) 16:30 - Project Demo 19:53 - Setup React With Vite 22:29 - File Explanation 25:11 - Boilerplate Cleanup 26:48 - Tailwind CSS Setup 30:24 - JSX Crash Course 39:37 - Start Homepage 42:00 - Navbar Component 43:56 - Image Import 45:24 - Hero Component 46:17 - Props 48:00 - Default Props 48:51 - Wrapper Components 55:14 - JobListings Component 58:50 - Create Lists With map() 1:03:20 - Single JobListing Component 1:05:49 - Limit Jobs to 3 1:07:50 - useState() Hook & Desc Toggle 1:13:07 - Creating an Event 1:14:20 - Updating Component State 1:16:00 - React Icons Package 1:18:00 - React Router Setup 1:20:21 - Create Routes From Elements 1:21:36 - Router Provider 1:22:36 - Homepage Component/Route 1:24:40 - Layouts 1:29:06 - Jobs Page Component/Route 1:30:50 - Link Component 1:34:20 - Custom 404 Page 1:36:55 - Active Links With NavLink 1:41:00 - Conditional Rendering 1:43:10 - JSON Server Setup 1:47:00 - useEffect() & Data Fetching 1:53:07 - Loading Spinner 1:51:06 - Conditional Fetching 1:59:45 - Proxying 2:03:38 - Single Job Page 2:09:04 - useParams() to Get ID 2:12:25 - Data Loaders 2:16:36 - Single Job Output 2:22:00 - Add Job Page 2:23:40 - Working With Forms 2:30:05 - Form Submission 2:35:27 - Pass Function as Prop 2:39:32 - POST Request to Add Job 2:41:45 - Delete Job Button/function 2:45:12 - DELETE Request to Remove Job 2:46:50 - React Toastify Package 2:50:08 - Edit Job Page/Form 2:56:05 - Update Form Submission 2:58:54 - PUT Request to Update Job 3:02:10 - Build Static Assets For Production …...mais
...mais Mostrar menos

Capítulos

Intro

Intro

0:00

Intro

0:00

What Is React? (Slide)

What Is React? (Slide)

1:55

What Is React? (Slide)

1:55

Why React? (Slide)

Why React? (Slide)

3:43

Why React? (Slide)

3:43

What Are Components? (Slide)

What Are Components? (Slide)

7:19

What Are Components? (Slide)

7:19
Transcrição

Acompanhe usando a transcrição.

Traversy Media

2,35 mi de inscritos
Vídeos
Sobre
Vídeos
Sobre
Twitter
Instagram
Linkedin

Transcrição

NaN / NaN
Todos
Da sua pesquisa
De Traversy Media
Framework
JavaScript
Aprendizagem
2:56:44
2:56:44
Tocando agora

Vue.js Crash Course

Traversy Media
Traversy Media

•
•
420 mil visualizações há 11 meses

Shorts

The Perfect Sofa – According to Science

6,9 mi de visualizações

The perfect drop shot doesn’t exis…😱‼️ #alcaraz #tennis #montecarlo

407 mil visualizações

Let's Make Earth Twice as Large!

11 mi de visualizações
1:20:04
1:20:04
Tocando agora

React Tutorial for Beginners

Programming with Mosh
Programming with Mosh

•
•
4,5 mi de visualizações há 2 anos
28:00
28:00
Tocando agora

All The JavaScript You Need To Know For React

PedroTech
PedroTech

•
•
766 mil visualizações há 3 anos
11:58
11:58
Tocando agora

Introdução à IoT | Fundamentos da IoT | Definição de IoT | Importância da IoT | História da IoT

Engineering Funda
Engineering Funda

•
•
77 visualizações há 1 dia

Novo

121 vídeos

ReactJS Tutorial for Beginners

Codevolution
• Playlist
Ver playlist completa
11:53
11:53
Tocando agora

Every React Concept Explained in 12 Minutes

Code Bootcamp
Code Bootcamp
•
•
1,2 mi de visualizações há 1 ano
8:40
8:40
Tocando agora

5 Signs of an Inexperienced Self-Taught Developer (and how to fix)

Travis Media
Travis Media

•
•
945 mil visualizações há 1 ano
17 vídeos

'React Crash Course 2024' (Traversy Media) and others

xjaredxwallacex • Playlist
Ver playlist completa
7:41
7:41
Tocando agora

Está ficando um pouco ridículo...

Maximilian Schwarzmüller
Maximilian Schwarzmüller
•
•
54 mil visualizações há 3 meses
7:30
7:30
Tocando agora

7 React Lessons I Wish I Knew Earlier

Code Bootcamp
Code Bootcamp
•
•
103 mil visualizações há 1 ano
1:12:28
1:12:28
Tocando agora

1940's Retro Jazz - Nostalgic Jazz

barely jazz
barely jazz
•
•
928 mil visualizações há 4 semanas
1:39:30
1:39:30
Tocando agora

Learn React With This ONE Project

Tech With Tim
Tech With Tim

•
•
340 mil visualizações há 6 meses
15:59
15:59
Tocando agora

Como estudar mais em 1 mês do que a maioria das pessoas estuda em 12 meses

Justin Sung
Justin Sung

•
•
240 mil visualizações há 9 dias
15:22
15:22
Tocando agora

As profundas e duradouras consequências de ter 'filho favorito' na família

BBC News Brasil
BBC News Brasil

•
•
98 mil visualizações há 1 ano
18:59
18:59
Tocando agora

How To Think Like The 1% | English & Chill with Jennie | English Podcast

Jennie’s English Podcast
Jennie’s English Podcast
•
•
249 visualizações há 2 horas

Novo

33:31
33:31
Tocando agora

30 Common English Phrases for Everyday Use | English Listening Practice Podcast to Improve Speaking

English in Comfort
English in Comfort

•
•
5,9 mil visualizações há 4 dias

Novo

30:25
30:25
Tocando agora

CACHE-ASIDE: Escalabilidade, Performance e Arquitetura de Software pra Mandar Bem na Entrevista!

Renato Augusto
Renato Augusto
•
•
24 mil visualizações há 6 dias

Novo

15:51
15:51
Tocando agora

ENTENDA MAIS INGLÊS EM 15MIN com o CHRIS

Fluente Sem Diploma
Fluente Sem Diploma
•
•
320 mil visualizações há 4 meses
12:18
12:18
Tocando agora

Master React JS in easy way

Nova Designs
Nova Designs
•
•
236 mil visualizações há 10 meses
50:26
50:26
Tocando agora

All The Typescript You Need to Know For React Development - Learn TS For React in 50 Minutes

PedroTech
PedroTech

•
•
66 mil visualizações há 1 ano
Todos
Shorts
Vídeos
Não assistidos
Assistidos
Enviados recentemente
Ao vivo
Playlists
Filtros de pesquisa
3:04:36
3:04:36
Tocando agora

React Crash Course

Traversy Media
Traversy Media

Verificado
•
•
842 mil visualizações há 1 ano
Traversy Media
Traversy Media

Verificado
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend. Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.
Informações retiradas da descrição do vídeo
60 capítulos
Intro | What Is React? (Slide) | Why React? (Slide) | What Are Components? (Slide) | What Is State? (Slide) | What Are Hooks? (Slide) | What Is JSX? (Slide) | SPA, SSR, SSG (Slide) | Vite (Slide) | Project Demo | Setup React With Vite | File Explanation | Boilerplate Cleanup | Tailwind CSS Setup | JSX Crash Course | Start Homepage | Navbar Component | Image Import | Hero Component | Props | Default Props | Wrapper Components | JobListings Component | Create Lists With map() | Single JobListing Component | Limit Jobs to 3 | useState() Hook & Desc Toggle | Creating an Event | Updating Component State | React Icons Package | React Router Setup | Create Routes From Elements | Router Provider | Homepage Component/Route | Layouts | Jobs Page Component/Route | Link Component | Custom 404 Page | Active Links With NavLink | Conditional Rendering | JSON Server Setup | useEffect() & Data Fetching | Loading Spinner | Proxying | Single Job Page | useParams() to Get ID | Data Loaders | Single Job Output | Add Job Page | Working With Forms | Form Submission | Pass Function as Prop | POST Request to Add Job | Delete Job Button/function | DELETE Request to Remove Job | React Toastify Package | Edit Job Page/Form | Update Form Submission | PUT Request to Update Job | Build Static Assets For Production
60 capítulos neste vídeo
60 capítulos

Intro

Intro

0:00

Intro

0:00

What Is React? (Slide)

What Is React? (Slide)

1:55

What Is React? (Slide)

1:55

Why React? (Slide)

Why React? (Slide)

3:43

Why React? (Slide)

3:43

What Are Components? (Slide)

What Are Components? (Slide)

7:19

What Are Components? (Slide)

7:19

What Is State? (Slide)

What Is State? (Slide)

8:21

What Is State? (Slide)

8:21

What Are Hooks? (Slide)

What Are Hooks? (Slide)

10:00

What Are Hooks? (Slide)

10:00

What Is JSX? (Slide)

What Is JSX? (Slide)

11:17

What Is JSX? (Slide)

11:17
Traversy Media
Traversy Media

Verificado
@TraversyMedia•2,35 mi de inscritos
Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from ...
2:07:19
2:07:19
Tocando agora

React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

JavaScript Mastery
JavaScript Mastery

Verificado
•
•
1,1 mi de visualizações há 4 meses
JavaScript Mastery
JavaScript Mastery

Verificado
Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app in this hands-on crash course! Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app in this hands-on crash course!
Informações retiradas da descrição do vídeo
21 capítulos
Intro | Crash Course | React Setup | Create React.js Project | Components | Props | Styles | States and Hooks | UseEffect Hook | React Snippets | About the Project | Tailwind CSS setup | Assets & styles | Develop header | The Movie DB API | Develop movie card component | Implement search | Optimize search | Trending Movies Feature | Show Trending Movies | Deployment
21 capítulos neste vídeo
21 capítulos

Intro

Intro

0:00

Intro

0:00

Crash Course

Crash Course

1:41

Crash Course

1:41

React Setup

React Setup

5:08

React Setup

5:08

Create React.js Project

Create React.js Project

7:33

Create React.js Project

7:33

Components

Components

15:12

Components

15:12

Props

Props

17:55

Props

17:55

Styles

Styles

20:03

Styles

20:03
1:39:30
1:39:30
Tocando agora

Learn React With This ONE Project

Tech With Tim
Tech With Tim

Verificado
•
•
340 mil visualizações há 6 meses
Tech With Tim
Tech With Tim

Verificado
In this video, you'll learn React by walking through a practical project. We're going to use a real-world API that can fetch and ... In this video, you'll learn React by walking through a practical project. We're going to use a real-world API that can fetch and ...
Informações retiradas da descrição do vídeo

4K

Legendas

18 capítulos
Overview | Free Resource | Demo | React Introduction | Setup & Installation | React Template Walkthrough | JSX | Components | Movie Card Component | Conditional Rendering | Home Page & .map() | State | Page Routing | CSS Styling | Calling APIS | useEffect | Searching for Movies | Contexts
18 capítulos neste vídeo
18 capítulos

Overview

Overview

0:00

Overview

0:00

Free Resource

Free Resource

0:57

Free Resource

0:57

Demo

Demo

2:04

Demo

2:04

React Introduction

React Introduction

3:03

React Introduction

3:03

Setup & Installation

Setup & Installation

6:02

Setup & Installation

6:02

React Template Walkthrough

React Template Walkthrough

8:08

React Template Walkthrough

8:08

JSX

JSX

13:31

JSX

13:31
59:25
59:25
Tocando agora

Learn Next.js 15 in 1 hour - Beginner Tutorial

Codevolution
Codevolution

Verificado
•
•
217 mil visualizações há 7 meses
Codevolution
Codevolution

Verificado
Business - codevolution.business@gmail.com Next.js 15 Crash Course - Tutorial for Beginners Learn Next.js 15, the React ... Business - codevolution.business@gmail.com Next.js 15 Crash Course - Tutorial for Beginners Learn Next.js 15, the React ...
Informações retiradas da descrição do vídeo
11 capítulos
Introduction to Next.js 15 | Development Environment | New Next.js Project | Understanding Project Structure | React Server Components | Routing | Route Handlers | Fetching Data | Server Actions | Authentication | Next Steps
11 capítulos neste vídeo
11 capítulos

Introduction to Next.js 15

Introduction to Next.js 15

0:00

Introduction to Next.js 15

0:00

Development Environment

Development Environment

2:19

Development Environment

2:19

New Next.js Project

New Next.js Project

3:02

New Next.js Project

3:02

Understanding Project Structure

Understanding Project Structure

5:06

Understanding Project Structure

5:06

React Server Components

React Server Components

8:10

React Server Components

8:10

Routing

Routing

12:40

Routing

12:40

Route Handlers

Route Handlers

26:18

Route Handlers

26:18
4:43:02
4:43:02
Tocando agora

React Full Course for free ⚛️ (2024)

Bro Code
Bro Code

Verificado
•
•
2,6 mi de visualizações há 1 ano
Bro Code
Bro Code

Verificado
reactjs #course #tutorial This is a beginners React JS course that should be enough to get you started using the React Library. reactjs #course #tutorial This is a beginners React JS course that should be enough to get you started using the React Library.
Informações retiradas da descrição do vídeo
20 capítulos
1..React tutorial for beginners ⚛️ | 2..card components | 3..add CSS styles | 4..props📧 (*defaultProps are now deprecated in React 19+ ) | 5..conditional rendering | 6..render lists | 7..click events | 8..useState() hook | 9..onChange event handler | 10..color picker app | 11..updater functions | 12..update OBJECTS in state | 13..update ARRAYS in state | 14..update ARRAY of OBJECTS in state | 15..to-do list app | 16..useEffect() hook | 17..digital clock app | 18..useContext() hook 🧗‍♂️ | 19..useRef() hook 🗳️ | 20..stopwatch app
20 capítulos neste vídeo
20 capítulos

1..React tutorial for beginners ⚛️

1..React tutorial for beginners ⚛️

0:00

1..React tutorial for beginners ⚛️

0:00

2..card components

2..card components

20:26

2..card components

20:26

3..add CSS styles

3..add CSS styles

32:24

3..add CSS styles

32:24

4..props📧 (*defaultProps are now deprecated in React 19+ )

4..props📧 (*defaultProps are now deprecated in React 19+ )

40:40

4..props📧 (*defaultProps are now deprecated in React 19+ )

40:40

5..conditional rendering

5..conditional rendering

52:49

5..conditional rendering

52:49

6..render lists

6..render lists

1:03:04

6..render lists

1:03:04

7..click events

7..click events

1:29:43

7..click events

1:29:43
46 vídeos

React Projects

Traversy Media
• Playlist
Build an Expense Tracker | React Hooks & Context API · 49:41
React & Tailwind CSS Image Gallery · 38:56
Ver playlist completa
12:32
12:32
Tocando agora

Como aprender JavaScript RÁPIDO em 2025

Catherine Li
Catherine Li
•
•
69 mil visualizações há 2 meses
Catherine Li
Catherine Li
Se você quer uma introdução fácil ao JavaScript para ajudar a levar seu código para o próximo nível, confira este recurso ... Se você quer uma introdução fácil ao JavaScript para ajudar a levar seu código para o próximo nível, confira este recurso ...
Informações retiradas da descrição do vídeo

4K

1:26:40
1:26:40
Tocando agora

Supabase Full Course 2025 | Become a Supabase Pro in 1.5 Hours

PedroTech
PedroTech

Verificado
•
•
43 mil visualizações há 1 mês
PedroTech
PedroTech

Verificado
Learn Supabase in this complete course for beginners! In less than 2 hours, you'll learn how to set up a Supabase project, build ... Learn Supabase in this complete course for beginners! In less than 2 hours, you'll learn how to set up a Supabase project, build ...
Informações retiradas da descrição do vídeo

4K

8 capítulos
Intro | Setting Up Project (Account, Organization & Project Creation) | Tables (Table Editor & Creating the Users/Tasks Tables) | Row Level Security (RLS) Policies | React Integration & CRUD Operations | Authentication (Sign In/Sign Up and Session Handling) | Supabase Subscriptions (Realtime Updates) | Supabase File Storage (Adding Images to Tasks)
8 capítulos neste vídeo
8 capítulos

Intro

Intro

0:00

Intro

0:00

Setting Up Project (Account, Organization & Project Creation)

Setting Up Project (Account, Organization & Project Creation)

1:00

Setting Up Project (Account, Organization & Project Creation)

1:00

Tables (Table Editor & Creating the Users/Tasks Tables)

Tables (Table Editor & Creating the Users/Tasks Tables)

5:01

Tables (Table Editor & Creating the Users/Tasks Tables)

5:01

Row Level Security (RLS) Policies

Row Level Security (RLS) Policies

13:03

Row Level Security (RLS) Policies

13:03

React Integration & CRUD Operations

React Integration & CRUD Operations

20:30

React Integration & CRUD Operations

20:30

Authentication (Sign In/Sign Up and Session Handling)

Authentication (Sign In/Sign Up and Session Handling)

42:52

Authentication (Sign In/Sign Up and Session Handling)

42:52

Supabase Subscriptions (Realtime Updates)

Supabase Subscriptions (Realtime Updates)

1:04:37

Supabase Subscriptions (Realtime Updates)

1:04:37

Outros usuários também assistiram

10:00
10:00
Tocando agora

React JS Explained In 10 Minutes

Dennis Ivy
Dennis Ivy

Verificado
•
•
497 mil visualizações há 3 anos
Dennis Ivy
Dennis Ivy

Verificado
A list of the core concepts every React developer should have a solid grasp on. React Course: ... A list of the core concepts every React developer should have a solid grasp on. React Course: ...
Informações retiradas da descrição do vídeo
16 capítulos
Intro | What is React | Components | JSX | Router | Prop | State | Component Life Cycle | React Hooks | Global State | Virtual DOM | Key Prop | Handling Events | Handling Forms | Conditional Rendering | Common Commands
16 capítulos foram gerados automaticamente neste vídeo
16 capítulos

Intro

Intro

0:00

Intro

0:00

What is React

What is React

0:50

What is React

0:50

Components

Components

1:30

Components

1:30

JSX

JSX

2:23

JSX

2:23

Router

Router

3:08

Router

3:08

Prop

Prop

3:29

Prop

3:29

State

State

3:54

State

3:54
20:27
20:27
Tocando agora

React tutorial for beginners ⚛️

Bro Code
Bro Code

Verificado
•
•
378 mil visualizações há 1 ano
Bro Code
Bro Code

Verificado
00:00:00 introduction 00:01:41 installation 00:02:48 new project 00:05:00 how to restart dev server 00:05:36 project folder ... 00:00:00 introduction 00:01:41 installation 00:02:48 new project 00:05:00 how to restart dev server 00:05:36 project folder ...
Informações retiradas da descrição do vídeo
10 capítulos
introduction | installation | new project | how to restart dev server | project folder explanation | App component | new Header component | new Footer component | new Food component | conclusion
10 capítulos neste vídeo
10 capítulos

introduction

introduction

0:00

introduction

0:00

installation

installation

1:41

installation

1:41

new project

new project

2:48

new project

2:48

how to restart dev server

how to restart dev server

5:00

how to restart dev server

5:00

project folder explanation

project folder explanation

5:36

project folder explanation

5:36

App component

App component

8:13

App component

8:13

new Header component

new Header component

9:14

new Header component

9:14
21:28
21:28
Tocando agora

Testing In React Tutorial - Jest and React Testing Library

PedroTech
PedroTech

Verificado
•
•
182 mil visualizações há 2 anos
PedroTech
PedroTech

Verificado
In this video I will be going over testing in react by using Jest and React Testing Library. Code: Join our Discord: ... In this video I will be going over testing in react by using Jest and React Testing Library. Code: Join our Discord: ...
Informações retiradas da descrição do vídeo
3 capítulos
Demo | Creating tests for components | Running tests
3 capítulos neste vídeo
3 capítulos

Demo

Demo

0:00

Demo

0:00

Creating tests for components

Creating tests for components

4:03

Creating tests for components

4:03

Running tests

Running tests

12:43

Running tests

12:43
28:00
28:00
Tocando agora

All The JavaScript You Need To Know For React

PedroTech
PedroTech

Verificado
•
•
766 mil visualizações há 3 anos
PedroTech
PedroTech

Verificado
In this video I will go over all the JavaScript I believe is necessary for someone starting to learn react. Obviously, the more ... In this video I will go over all the JavaScript I believe is necessary for someone starting to learn react. Obviously, the more ...
Informações retiradas da descrição do vídeo
6 capítulos
Intro | Arrow Functions | Ternary Operators | Objects | Map, Filter... | Async-Await, Promises, Fetch
6 capítulos neste vídeo
6 capítulos

Intro

Intro

0:00

Intro

0:00

Arrow Functions

Arrow Functions

1:18

Arrow Functions

1:18

Ternary Operators

Ternary Operators

5:53

Ternary Operators

5:53

Objects

Objects

11:23

Objects

11:23

Map, Filter...

Map, Filter...

17:59

Map, Filter...

17:59

Async-Await, Promises, Fetch

Async-Await, Promises, Fetch

24:29

Async-Await, Promises, Fetch

24:29
+5 mais
3:03:29
3:03:29
Tocando agora

React Native Crash Course+ | Build a Mobile App In 3 Hours

Traversy Media
Traversy Media

Verificado
•
•
74 mil visualizações há 3 meses
Traversy Media
Traversy Media

Verificado
In this 3-hour course, we will learn all about React Native for building iOS and Android apps. We will discuss the fundamentals ... In this 3-hour course, we will learn all about React Native for building iOS and Android apps. We will discuss the fundamentals ...
Informações retiradas da descrição do vídeo
35 capítulos
Intro | Slides (What Is React Native, etc) | Setup With Expo | Reset Project Boilerplate | Running Your Project | React Native Components | Styling | Layout, Stack & Slot Components | Customize Page Header | Home Screen | Notes Screen & Layout | Display Notes In FlatList | Modal & TextInput Components | Add Note To UI | Component Refactor | Appwrite.io Project & Database Setup | Environment Variables | Appwrite SDK Install & Config | Database Service (listDocuments) | Note Service (getNotes) | Fetch Notes From Screen Component | Add Note To Database | Delete Notes | Update Notes | Authentication With Appwrite | Authentication Service | Auth Context & Provider | Auth Screen | Login & Register Form | Auth Funcionality | Logout | Redirect Logged In Users | Filter Users Notes | No Note Display | Building & Publishing (EAS)
35 capítulos neste vídeo
35 capítulos

Intro

Intro

0:00

Intro

0:00

Slides (What Is React Native, etc)

Slides (What Is React Native, etc)

1:29

Slides (What Is React Native, etc)

1:29

Setup With Expo

Setup With Expo

9:53

Setup With Expo

9:53

Reset Project Boilerplate

Reset Project Boilerplate

14:19

Reset Project Boilerplate

14:19

Running Your Project

Running Your Project

15:38

Running Your Project

15:38

React Native Components

React Native Components

16:32

React Native Components

16:32

Styling

Styling

18:36

Styling

18:36
1:48:48
1:48:48
Tocando agora

React JS Crash Course

Traversy Media
Traversy Media

Verificado
•
•
3,5 mi de visualizações há 4 anos
Traversy Media
Traversy Media

Verificado
Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, ... Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, ...
Informações retiradas da descrição do vídeo
32 capítulos
Intro & Slides | Create a React app | Files & folders | App component & JSX | Expressions in JSX | Creating a component | Component Props | PropTypes | Styling | Button Component | Events | Tasks Component | Create a list with .map() | State & useState Hook | Global state | Task Component | Icons with react-icons | Delete task & prop drilling | Optional message if no tasks | Toggle reminder & conditional styling | Add Task Form | Form input state (controlled components) | Add task submit | showAddTask state | Button toggle | Build for production | JSON Server | useEffect Hook & Fetch tasks from server | Delete task from server | Add task to server | Toggle reminder on server | Routing, footer & about
32 capítulos neste vídeo
32 capítulos

Intro & Slides

Intro & Slides

0:00

Intro & Slides

0:00

Create a React app

Create a React app

12:37

Create a React app

12:37

Files & folders

Files & folders

14:52

Files & folders

14:52

App component & JSX

App component & JSX

18:54

App component & JSX

18:54

Expressions in JSX

Expressions in JSX

22:39

Expressions in JSX

22:39

Creating a component

Creating a component

23:49

Creating a component

23:49

Component Props

Component Props

27:18

Component Props

27:18

Shorts

When a Javascript developer discovers React for the first time...

2 mi de visualizações

Top 5 React JS projects for Beginners

123 mil visualizações

What is the difference between JavaScript and TypeScript ?! #tech #coding #stem

83 mil visualizações

Vanilla CSS vs Tailwind CSS Reaction 💀 #shorts #coding #css #tailwindcss

38 mil visualizações

3 Levels Of React Developers #reactjs #reactdevelopment #reactjsdeveloper #webdevelopment

388 mil visualizações

Learning React Is Like Making A Sandwich

91 mil visualizações
42:38
42:38
Tocando agora

Learn React With This One Project

Web Dev Simplified
Web Dev Simplified

Verificado
•
•
932 mil visualizações há 2 anos
Web Dev Simplified
Web Dev Simplified

Verificado
Learning React is hard. There are so many concepts to learn and mindsets shifts that you need to do. That is why in this video I ... Learning React is hard. There are so many concepts to learn and mindsets shifts that you need to do. That is why in this video I ...
Informações retiradas da descrição do vídeo
9 capítulos
Introduction | What Is React | Thinking In React | Todo List Project Setup | JSX | React State | Todos Logic | Break App Into Components | useEffect Hook
9 capítulos neste vídeo
9 capítulos

Introduction

Introduction

0:00

Introduction

0:00

What Is React

What Is React

1:10

What Is React

1:10

Thinking In React

Thinking In React

2:45

Thinking In React

2:45

Todo List Project Setup

Todo List Project Setup

6:07

Todo List Project Setup

6:07

JSX

JSX

10:45

JSX

10:45

React State

React State

15:30

React State

15:30

Todos Logic

Todos Logic

20:15

Todos Logic

20:15
17 vídeos

'React Crash Course 2024' (Traversy Media) and others

xjaredxwallacex • Playlist
React Crash Course · 3:04:36
Web Development Technologies - A Practical Guide · 2:43:32
Ver playlist completa

Shorts

Learning React Is Like Making A Sandwich

91 mil visualizações

Forget create-react-app! Use THIS instead!!

125 mil visualizações

Flutter VS React Native - The END 🛑

110 mil visualizações

how i would learn react js if i could start over

39 mil visualizações

How To Master JavaScript

1,1 mi de visualizações

Best websites to learn react in 2024 #react #reactjswebsite #reactjs #learn

33 mil visualizações
121 vídeos

ReactJS Tutorial for Beginners

Codevolution
• Playlist
ReactJS Tutorial - 1 - Introduction · 9:34
ReactJS Tutorial - 2 - Hello World · 4:54
Ver playlist completa
54:27
54:27
Tocando agora

Exploring React 19 Features - use() Hook, Actions & More

Traversy Media
Traversy Media

Verificado
•
•
74 mil visualizações há 1 ano
Traversy Media
Traversy Media

Verificado
In this video, we will look at some of the features of React 19 including the React compiler, use() hook, form actions, new hooks ... In this video, we will look at some of the features of React 19 including the React compiler, use() hook, form actions, new hooks ...
Informações retiradas da descrição do vídeo
19 capítulos
Intro | Compiler Info (Slide) | Automatic Memoization (Slide) | use() Hook Info (Slide) | use client & use server (Slide) | Actions (Slide) | useOptimistic (Slide) | Metadata (Slide) | Other Changes (Slide) | React 19 Playground Intro | use() Hook to Fetch Joke | use() Hook to Fetch Posts | use() Hook with Promise | use() Hook with Context | Action Example 1 - Post Form | Action Example 2 - Shopping Cart Form | useFormStatus() | useFormState() | useOptimistic()
19 capítulos neste vídeo
19 capítulos

Intro

Intro

0:00

Intro

0:00

Compiler Info (Slide)

Compiler Info (Slide)

1:24

Compiler Info (Slide)

1:24

Automatic Memoization (Slide)

Automatic Memoization (Slide)

3:05

Automatic Memoization (Slide)

3:05

use() Hook Info (Slide)

use() Hook Info (Slide)

4:04

use() Hook Info (Slide)

4:04

use client & use server (Slide)

use client & use server (Slide)

4:57

use client & use server (Slide)

4:57

Actions (Slide)

Actions (Slide)

5:43

Actions (Slide)

5:43

useOptimistic (Slide)

useOptimistic (Slide)

6:54

useOptimistic (Slide)

6:54

Descoberta avançada

26:43
26:43
Tocando agora

At the Airport English Conversation | Travel English | Listening & Speaking Practice | Podcast

English in Comfort
English in Comfort

Verificado
•
•
471 visualizações há 5 horas
English in Comfort
English in Comfort

Verificado
english #learnenglish #englishlearningpodcast #englishconversation #dailyenglish #englishlisteningpractice ... english #learnenglish #englishlearningpodcast #englishconversation #dailyenglish #englishlisteningpractice ...
Informações retiradas da descrição do vídeo

Novo

5:36:58
5:36:58
Tocando agora

Build and Deploy a Full Stack React Admin Dashboard with Tables, Charts and Real Data

JavaScript Mastery
JavaScript Mastery

Verificado
•
•
220 mil visualizações há 1 mês
JavaScript Mastery
JavaScript Mastery

Verificado
Build a dynamic travel dashboard with personalized travel suggestions, charts and tables using React Router v7. Upgrade this ... Build a dynamic travel dashboard with personalized travel suggestions, charts and tables using React Router v7. Upgrade this ...
Informações retiradas da descrição do vídeo
16 capítulos
Introduction | App Setup | Syncfusion Setup | Routing | Dashboard Layout | Admin Dashboard UI | Appwrite Setup | Auth Functionality | Auth UI | Entreprise Error Tracking & Monitoring | Users Table | Add new trip form | AI Trip Generation | Trip Details | All Trips | Finish the Dashboard
16 capítulos neste vídeo
16 capítulos

Introduction

Introduction

0:00

Introduction

0:00

App Setup

App Setup

2:36

App Setup

2:36

Syncfusion Setup

Syncfusion Setup

13:16

Syncfusion Setup

13:16

Routing

Routing

19:26

Routing

19:26

Dashboard Layout

Dashboard Layout

26:26

Dashboard Layout

26:26

Admin Dashboard UI

Admin Dashboard UI

56:17

Admin Dashboard UI

56:17

Appwrite Setup

Appwrite Setup

1:25:47

Appwrite Setup

1:25:47
2:24:41
2:24:41
Tocando agora

📈 React Admin Dashboard: Creating a dynamic and responsive dashboard using React JS

DStudio Technology
DStudio Technology
•
•
114 mil visualizações há 1 ano
DStudio Technology
DStudio Technology
Description: Responsive admin dashboard design using react js, Responsive admin dashboard react js, Responsive admin ... Description: Responsive admin dashboard design using react js, Responsive admin dashboard react js, Responsive admin ...
Informações retiradas da descrição do vídeo
11 capítulos
Intro | What you will learn | Setting up project | Header | Side Menu | Dashboard (Cards, Graph, Charts, Table, List) | Setting up Mock Api (JSON Server) | Data Fetching from api endpoint (fetch) | Footer | Back to top button | Conclusion
11 capítulos neste vídeo
11 capítulos

Intro

Intro

0:00

Intro

0:00

What you will learn

What you will learn

1:33

What you will learn

1:33

Setting up project

Setting up project

6:45

Setting up project

6:45

Header

Header

19:15

Header

19:15

Side Menu

Side Menu

44:01

Side Menu

44:01

Dashboard (Cards, Graph, Charts, Table, List)

Dashboard (Cards, Graph, Charts, Table, List)

58:35

Dashboard (Cards, Graph, Charts, Table, List)

58:35

Setting up Mock Api (JSON Server)

Setting up Mock Api (JSON Server)

1:08:01

Setting up Mock Api (JSON Server)

1:08:01
+10 mais
45:11
45:11
Tocando agora

React Admin Crash Course 2025

Traversy Media
Traversy Media

Verificado
•
•
31 mil visualizações há 5 meses
Traversy Media
Traversy Media

Verificado
Learn how to create a full-featured admin panel for your APIs while writing very little code using React Admin. We will create a ... Learn how to create a full-featured admin panel for your APIs while writing very little code using React Admin. We will create a ...
Informações retiradas da descrição do vídeo
11:53
11:53
Tocando agora

Every React Concept Explained in 12 Minutes

Code Bootcamp
Code Bootcamp
•
•
1,2 mi de visualizações há 1 ano
Code Bootcamp
Code Bootcamp
Chapters 0:00 - Intro 0:11 - Components 0:29 - JSX 1:02 - Curly Braces 1:29 - Fragments 1:49 - Props 2:20 - Children 2:54 - Keys ... Chapters 0:00 - Intro 0:11 - Components 0:29 - JSX 1:02 - Curly Braces 1:29 - Fragments 1:49 - Props 2:20 - Children 2:54 - Keys ...
Informações retiradas da descrição do vídeo
22 capítulos
Intro | Components | JSX | Curly Braces | Fragments | Props | Children | Keys | Rendering | Event Handling | State | Controlled Components | Hooks | Purity | Strict Mode | Effects | Refs | Context | Portals | Suspense | Error Boundaries | Learn More
22 capítulos neste vídeo
22 capítulos

Intro

Intro

0:00

Intro

0:00

Components

Components

0:11

Components

0:11

JSX

JSX

0:29

JSX

0:29

Curly Braces

Curly Braces

1:02

Curly Braces

1:02

Fragments

Fragments

1:29

Fragments

1:29

Props

Props

1:49

Props

1:49

Children

Children

2:20

Children

2:20

Assistidos anteriormente

4:04:25
4:04:25
Tocando agora

Build a COMPLETE React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode

EdRoh
EdRoh
•
•
1,7 mi de visualizações há 2 anos
EdRoh
EdRoh
React Admin Dashboard Tutorial from scratch. We will be using React, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and ... React Admin Dashboard Tutorial from scratch. We will be using React, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and ...
Informações retiradas da descrição do vídeo

4K

17 capítulos
Demonstration of a Complete React Admin Dashboard | Why build this React Admin Dashboard? | Installation | Code Setup | File and Folder Architecture | Theme with Light and Dark Mode | Appbar aka Topbar | Router Setup | Navbar aka Sidebar with React Pro Sidebar | Tables with Mui Data Grid | Profile Form with Formik and Yup | Calendar using FullCalendar Package | FAQ Page with MUI Accordion | Bar, Line, Pie and Geography Charts with Nivo Charts | Dashboard | Final Demo of Dashboard | Fully Built Complete React Admin Dashboard
17 capítulos neste vídeo
17 capítulos

Demonstration of a Complete React Admin Dashboard

Demonstration of a Complete React Admin Dashboard

0:00

Demonstration of a Complete React Admin Dashboard

0:00

Why build this React Admin Dashboard?

Why build this React Admin Dashboard?

3:12

Why build this React Admin Dashboard?

3:12

Installation

Installation

3:47

Installation

3:47

Code Setup

Code Setup

7:28

Code Setup

7:28

File and Folder Architecture

File and Folder Architecture

12:31

File and Folder Architecture

12:31

Theme with Light and Dark Mode

Theme with Light and Dark Mode

17:41

Theme with Light and Dark Mode

17:41

Appbar aka Topbar

Appbar aka Topbar

36:47

Appbar aka Topbar

36:47
2:46:59
2:46:59
Tocando agora

Build And Deploy a Modern Personal Portfolio with ReactJS and TailwindCSS | React Beginner Tutorial

PedroTech
PedroTech

Verificado
•
•
51 mil visualizações há 1 mês
PedroTech
PedroTech

Verificado
Welcome to the ultimate modern ReactJS and TailwindCSS beginner portfolio tutorial. We will build a stunning space portfolio that ... Welcome to the ultimate modern ReactJS and TailwindCSS beginner portfolio tutorial. We will build a stunning space portfolio that ...
Informações retiradas da descrição do vídeo

4K

10 capítulos
Introduction and Project Setup | TailwindCSS Setup and Theme Customization | Theme Toggle and Background Effects | Building the Navbar | Hero Section Implementation | About Me Section | Skills Section | Projects Section | Contact Section | Footer, Final Review, and Deployment
10 capítulos neste vídeo
10 capítulos

Introduction and Project Setup

Introduction and Project Setup

0:00

Introduction and Project Setup

0:00

TailwindCSS Setup and Theme Customization

TailwindCSS Setup and Theme Customization

3:30

TailwindCSS Setup and Theme Customization

3:30

Theme Toggle and Background Effects

Theme Toggle and Background Effects

32:30

Theme Toggle and Background Effects

32:30

Building the Navbar

Building the Navbar

56:30

Building the Navbar

56:30

Hero Section Implementation

Hero Section Implementation

1:18:00

Hero Section Implementation

1:18:00

About Me Section

About Me Section

1:28:30

About Me Section

1:28:30

Skills Section

Skills Section

1:40:45

Skills Section

1:40:45
6:22:15
6:22:15
Tocando agora

Strapi 5 and Next.js 15 Full Stack Project Course

freeCodeCamp.org
freeCodeCamp.org

Verificado
•
•
59 mil visualizações há 4 meses
freeCodeCamp.org
freeCodeCamp.org

Verificado
Learn how to build a website with Next.js 15 and Strapi 5. In this course you'll learn to build a fully functional summer camp ... Learn how to build a website with Next.js 15 and Strapi 5. In this course you'll learn to build a fully functional summer camp ...
Informações retiradas da descrição do vídeo
27 capítulos
Course introduction and project overview | How to follow this course and local project setup | Getting started with Next.js 15 and Strapi 5 | Section 1- Building the home page | Section 2 - Building the experience page | Section 3 - Building top navigation | Section 4 - Building out the footer | Section 5 - Building the blog page | Section 6 - Form submission with server action | Section 6.5 - How to structure our blog data in Strapi | Section 7 - Custom data loading content list component | Section 8 - Implementing search and pagination in Next.js | Section 9 - Building a single blog detail page | Section 10 Building the events page and form | Conclusion | Where to next? | Interview with Niklas on styling and Figma Design | Why use Next.js | Setting up Next.js | Routing | Layout Page | Links and Navigation | Server and Client Components | Data fetching | Dynamic Routing | Not Found Page | Figma for developers
27 capítulos neste vídeo
27 capítulos

Course introduction and project overview

Course introduction and project overview

0:00

Course introduction and project overview

0:00

How to follow this course and local project setup

How to follow this course and local project setup

11:37

How to follow this course and local project setup

11:37

Getting started with Next.js 15 and Strapi 5

Getting started with Next.js 15 and Strapi 5

15:59

Getting started with Next.js 15 and Strapi 5

15:59

Section 1- Building the home page

Section 1- Building the home page

22:26

Section 1- Building the home page

22:26

Section 2 - Building the experience page

Section 2 - Building the experience page

1:29:20

Section 2 - Building the experience page

1:29:20

Section 3 - Building top navigation

Section 3 - Building top navigation

1:41:16

Section 3 - Building top navigation

1:41:16

Section 4 - Building out the footer

Section 4 - Building out the footer

1:54:21

Section 4 - Building out the footer

1:54:21
+7 mais
22:52:11
22:52:11
Tocando agora

FREE Coding Bootcamp - Build 4 Full Stack Projects in 23 Hours

Codesistency
Codesistency
•
•
383 mil visualizações há 8 meses
Codesistency
Codesistency
Timestamps: 00:00:00 Introduction 00:01:46 First Project (Easy React Project) 02:17:05 Twitter Clone (Intermediate React Project) ... Timestamps: 00:00:00 Introduction 00:01:46 First Project (Easy React Project) 02:17:05 Twitter Clone (Intermediate React Project) ...
Informações retiradas da descrição do vídeo
15:40:54
15:40:54
Tocando agora

Learn React JS - Full Beginner’s Tutorial & Practice Projects

freeCodeCamp.org
freeCodeCamp.org

Verificado
•
•
616 mil visualizações há 6 meses
freeCodeCamp.org
freeCodeCamp.org

Verificado
Learn modern React basics in the most interactive, hands-on way possible in the full course for beginners. Throughout this tutorial ... Learn modern React basics in the most interactive, hands-on way possible in the full course for beginners. Throughout this tutorial ...
Informações retiradas da descrição do vídeo
4:52
4:52
Tocando agora

REACT PABOLLO: Thomas Gaiato Shelby (Paródia Rdublagem)

Caroline Cazetta
Caroline Cazetta
•
•
230 visualizações há 1 dia
Caroline Cazetta
Caroline Cazetta
Camisetas de frases: https://reserva.ink/euqueroconhecer Instagram: https://www.instagram.com/eu.queroconhecer Fone JBL ... Camisetas de frases: https://reserva.ink/euqueroconhecer Instagram: https://www.instagram.com/eu.queroconhecer Fone JBL ...
Informações retiradas da descrição do vídeo

Novo

4K

2x
Se a reprodução não começar em instantes, reinicie seu dispositivo.
•
Compartilhar
Ocorreu um erro ao recuperar informações de compartilhamento. Tente novamente mais tarde.
0:00